<script setup lang="ts">
import { ObjectUtil } from '@utils/object-util'
import { Cell } from '@antv/x6'

const props = defineProps<{
  cell: Cell | any
}>()

const _cell = shallowRef<typeof props.cell>()
onMounted(function () {
  init()
})

function init () {
  _cell.value = toRaw(props.cell)
  cellAttrs.value = ObjectUtil.copy(props.cell.attrs)
  const lineStyle = cellAttrs.value.line.style
  lineStyle.animationDuration = lineStyle.animationDuration.replace(/^([0-9.]+)(s|ms)/, '$1')
}

// region TODO 属性
const cellAttrs = ref<any>({ line: {}, wrap: {} })
function updateAttrsHandle (key: string, value: any, defaultValue?: any) {
  _cell.value.attr(key, value || defaultValue)
}
// endregion

// region TODO 属性
function updateAnimationDurationHandle (key: string, value: any, defaultValue?: any) {
  _cell.value.attr(key, value + 's')
}
// endregion

</script>

<template>
  <div v-if="_cell" class="attr-grid">
    <el-form-item label="外线宽">
      <el-input-number v-model="cellAttrs.wrap.strokeWidth" :min="0" @change="updateAttrsHandle('wrap/strokeWidth', $event)" />
    </el-form-item>
    <el-form-item label="间隔">
      <el-input-number v-model="cellAttrs.line.strokeDasharray" :min="0" @change="updateAttrsHandle('line/strokeDasharray', $event)" />
    </el-form-item>
    <el-form-item label="外线颜色">
      <el-color-picker v-model="cellAttrs.wrap.stroke" show-alpha @change="updateAttrsHandle('wrap/stroke', $event, 'rgba(0,0,0,0)')" />
    </el-form-item>
    <el-form-item label="速度">
      <el-input
        v-model="cellAttrs.line.style.animationDuration" type="number" step="0.1"
        @change="updateAnimationDurationHandle('line/style/animationDuration', $event)"
      >
        <template #append>s/1kpx</template>
      </el-input>
    </el-form-item>
  </div>
</template>

<style lang="scss" scoped>
</style>
